class Pager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            counts: this.props.counts,
            index: this.props.index,
            isshow:!1,
            id:0,
            list:[
                {
                    id:0,
                    name:"15条/页"
                },
                {
                    id:1,
                    name:"30条/页"
                },
                {
                    id:2,
                    name:"50条/页"
                },
                {
                    id:5,
                    name:"100条/页"
                },
            ]
        };
    }

    componentWillReceiveProps(e) {
        let { counts, index } = e, html = [],html1=[],html2=[],html3=[],html4=[],html5=[];
        if (counts.length > 0 && counts.length < 5) {
            counts.forEach((x, i) => {
                html.push(
                    <p key={i} onClick={this.click.bind(this, i)} className={index == i ? "check" : ""}>{x}</p>
                )
            });
            this.setState({ html })
        } else {
            counts.forEach((x, i) => {
                if (index < 3) {
                    if (i < 5) {
                        html1.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""} `}>{x}</p>
                        )
                    } else if (i == counts.length - 1) {
                        html5.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""} `}>{x}</p>
                        )
                    } else {
                        html2=<p>...</p>
                    }
                }
                else if(index>counts.length-4){
                    if (i == 0) {
                        html.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""}`}>{x}</p>
                        )
                    } else if (i > counts.length - 6) {
                        html5.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={` hove ${index == i ? "check" : ""}`}>{x}</p>
                        )
                    } else {
                        html2=<p>...</p>
                    }
                }else{
                    if (i == 0) {
                        html.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""} `}>{x}</p>
                        )
                    } else if (i == counts.length - 1) {
                        html5.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""} `}>{x}</p>
                        )
                    } else if(i<index+3&&i>index-3){
                        // if()
                        html3.push(
                            <p key={i} onClick={this.click.bind(this, i)} className={`hove ${index == i ? "check" : ""} `}>{x}</p>
                        )
                    }else{
                        if(index-3==0){
                            html4=<p>...</p>
                        }else if(index+3==counts.length-1){
                            html2=<p>...</p>
                        }else{
                            html2=<p>...</p>
                            html4=<p>...</p>
                        }
                    }
                }
            });
            html.push(html1,html2,html3,html4,html5)
            this.setState({ html })

        }
    }
    porn(e) {
        let { index, counts } = this.props;
        console.log({index, counts,e},'porn');
        if (e == 0) { //前一页
            console.log('e == 0');
            if (index == 0) return;
            this.props.click(index - 1)
        } else {
            console.log(index, 'index')
            if (index == counts.length - 1) return;
            this.props.click(index + 1)
        }
    }

    click(e) {
        this.props.click(e)
    }
    change(e){
        console.log(this.props,'this.props')
        this.props.change(e)
    }
    

    componentDidMount() {
       
        let {list,id}=this.state,pagehtml=[],name=""
        list.forEach((x,i)=>{
            if(id==x.id){
                name=x.name
            }
            pagehtml.push(
                <div onClick={this.pagesize.bind(this,x.id)}>{x.name}</div>
            )
        })
        this.setState({name,pagehtml})
    }
    pagesize(e){
        console.log(e,'eeeee--pagesize');
        let {list,id,name}=this.state,that=this
        if(e==id)return;
        list.forEach((x,i)=>{
            if(e==x.id){
                name=x.name
            }
        })

        that.change(name)
       
        that.setState({isshow:!1,name,id:e})
    }
    isshow(){
        let {isshow}=this.state
        this.setState({isshow:!isshow})
    }




    render() {
        let { html,pagehtml,name,isshow  } = this.state, prev = '<', next = '>';
        return (

            <div className='pager'>
                <p onClick={this.porn.bind(this, 0)} className="hove">{prev}</p>
                {html}
                <p onClick={this.porn.bind(this, 1)} className="hove">{next}</p>
                <div className="setpage">
                    <div onClick={this.isshow.bind(this)} className="setpagetit"><span>{name}</span><img src={`./src/${isshow?"upward":"down"}.png`}/></div>
                    <div style={{display:isshow?"":"none"}} className="pagehtml">
                        {pagehtml}
                    </div>
                </div>
            </div>
            


        )
    }
}
